import React from 'react';
import useVirtualList from 'hooks/useVirtualList';
import mockData from 'mock/useVirtualList';
import style from './index.module.scss';

export default function UseVirtualList() {
  const [
    { viewportContainer, listContainer, data },
    {
      position: { top },
      setPosition,
    },
  ] = useVirtualList<{ id: string }>({
    sourceData: mockData,
    itemHeight: (item, index) => {
      if (index % 2 === 0) {
        return 50;
      } else if (index % 3 === 0) {
        return 40;
      } else {
        return 30;
      }
    },
    // itemHeight: 40,
  });
  return (
    <div className={style.root}>
      <div ref={viewportContainer} className="container">
        <div ref={listContainer} className="wrap">
          {data.map((item: any, index: number) => {
            return (
              <div className="item" key={index}>
                item---{item.id}
              </div>
            );
          })}
        </div>
      </div>
      {top > 800 && (
        <div className="back" onClick={() => setPosition()}>
          back
        </div>
      )}
    </div>
  );
}
